<!--  -->
<template>
  <div class="warp">
    <div class="item" @click="handleDetail(album.id)">
      <div class="_album">
        <img class="_img" :src="album.coverUrl" alt="" />
        <span class="_num">{{ album.photoAlbumNum }}</span>
      </div>
      <div class="_flex_line _name">
        <div class="_text">{{ album.name }}</div>
        <a-button v-has="'content:album:edit'" class="btn" type="primary" icon="arrow-up" size="small" @click.stop="handleTop(album.id)"></a-button>
      </div>
      <div class="_flex_line">
        <span class="_kv">
          <span class="_k">大小：</span>
          <span class="_v">{{ album.photoAlbumSize }}</span>
        </span>
        <span class="_kv">
          <span class="_k">上传人：</span>
          <span class="_v">{{ album.createName }}</span>
        </span>
      </div>
      <div class="_kv">
        <span class="_k">发布时间：</span>
        <span class="_v">{{ album.publishTime }}</span>
      </div>
    </div>
    <a-icon v-has="'content:album:remove'" v-if="isAlbumDel" class="icon del" type="delete" @click="handleDel(album.id)" />
    <a-tag v-if="belongId == undefined && index < 6 && albumCurrent === 1" color="orange" class="_tag">置顶</a-tag>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { forceDelPhotoAlbum, swapPhotoAlbum, photoAlbumTop } from '@/api/content/operate'
import { checkPermission } from '@/utils/authority';

export default {
  props: ['album', 'index'],
  components: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['isAlbumDel', 'albumList', 'belongId', 'albumCurrent']),
  },
  watch: {},
  methods: {
    ...mapActions(['GetPhotoAlbum']),
    ...mapMutations(['SET_ISALBUMDEL']),
    handleDetail(id) {
      if(checkPermission('content:albumDetail')){
        this.$router.push({
          path: '/content/albumDetail',
          query: { albumId: id },
        })
      }
    },
    async handleDel(id) {
      var _this = this
      this.$confirm({
        title: '删除相册?',
        content: '此操作将删除相册内所有图片，是否继续？',
        onOk: async () => {
          let { code, msg } = await forceDelPhotoAlbum(id)
          _this.$message[code === 0 ? 'success' : 'error'](msg)
          if (code === 0) {
            _this.GetPhotoAlbum()
          }
          _this.SET_ISALBUMDEL(false)
        },
        onCancel() {},
      })
    },
    //置顶
    async handleTop(id) {
      let { code, msg } = await photoAlbumTop(id)
      this.$message[code === 0 ? 'success' : 'error'](msg)
      if (code === 0) this.GetPhotoAlbum()
    },
    async handleMove(type) {
      // let { index } = this
      // let index2 = type === 'up' ? index - 1 : index + 1
      // let item1 = this.albumList[index],
      //     item2 = this.albumList[index2]
      // let list = [item1.id, item2.id]
      // let { code, msg } = await swapPhotoAlbum({ list })
      // this.$message[code === 0 ? 'success' : 'error'](msg)
      // if(code === 0){
      // }
    },
  },
  created() {},
  mounted() {},
}
</script>
<style scoped lang="less">
.warp {
  position: relative;
  padding: 10px 15px;
  margin: 0 20px 10px 0;
}
.warp:hover {
  background: rgba(204, 204, 204, 0.4);
  border-radius: 10px;
}
.item {
  width: 270px;
  ._album {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    ._img {
      width: 188px;
      height: 150px;
      border-radius: 4px;
      // object-fit: scale-down;
    }
    ._num {
      position: absolute;
      left: 200px;
      bottom: 5px;
      font-size: 16px;
      color: #fff;
      text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
    }
  }
  ._name {
    margin-top: 10px;
    ._text {
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
    .btn {
      width: 50px;
      flex-shrink: 0;
    }
  }
  ._flex_line {
    display: flex;
    justify-content: space-between;
  }
  ._kv {
    font-size: 14px;
    margin-top: 10px;
    ._k {
      color: #999;
    }
    ._v {
      color: #666;
    }
  }
}
.icon {
  position: absolute;
  right: 20px;
  font-size: 20px;
}
.del {
  top: 20px;
  cursor: pointer;
}
.up {
  bottom: 13px;
}
.down {
  bottom: 0;
}
._tag {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
